<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/singer.css">
    <link rel="stylesheet" href="css/singer-footer.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1926737_ezbylf3z8zo.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <div class="fixed">
      <div class="container">
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">
                  <span>音乐</span>         
              </a>
  
            </div>
        
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">我的音乐</a></li>
                <li><a href="#">VIP</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
  
                
              </ul>
            </div><!-- /.navbar-collapse -->
           
          </div><!-- /.container-fluid -->
        </nav>  
        <div class="navbar m-top-subnav">
          <div class="container container-fluid"> 
            <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a href="#" class="active">歌手</a></li>
                <li><a href="#">新碟</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">分类歌单</a></li>
                <li><a href="#">电台</a></li>
                <li><a href="#">MV</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
        
          </div>
        </div>
      </div>
    </div>
    
    <div class="bannerbox">
      <div class="container">
        <div class="row ">
          <div class="col-lg-12 col-md-12 col-sm-12 ">
              <div class="banner">
                <div class="slide">
                  <ul class="clearfix">
                    <li>
                      <img src="images/yunqibg.jpg" alt="">
                    </li>
                    <li><img src="images/juedaifenghua.jpg" alt=""></li>
                    <li><img src="images/dayan.jpg" alt=""></li>
                    <li><img src="images/zhuwokuaile.jpg" alt=""></li>
                    <li><img src="images/yunqibg.jpg" alt=""></li>
                  </ul>  
                </div> 
                <i class="iconfont icon-jiantouzuo"></i>
                <i class="iconfont icon-rightArrows"></i>
              </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="main">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">
              <div class="singer-tag">
                <div class="singer-tag-list">
                    <a href="#" class="singer-tag-list-hot">姓氏</a>
                    <a href="#">A</a>
                    <a href="#">B</a>
                    <a href="#">C</a>
                    <a href="#">D</a>
                    <a href="#">E</a>
                    <a href="#">F</a>
                    <a href="#">G</a>
                    <a href="#">H</a>
                    <a href="#">I</a>
                    <a href="#">J</a>
                    <a href="#">K</a>
                    <a href="#">L</a>
                    <a href="#">M</a>
                    <a href="#">N</a>
                    <a href="#">O</a>
                    <a href="#">P</a>
                    <a href="#">Q</a>
                    <a href="#">R</a>
                    <a href="#">S</a>
                    <a href="#">T</a>
                    <a href="#">U</a>
                    <a href="#">V</a>
                    <a href="#">W</a>
                    <a href="#">X</a>
                    <a href="#">Y</a>
                    <a href="#">Z</a>
                    <a href="#">#</a>
                </div>
                <div class="singer-tag-list">
                  <a href="#" class="singer-tag-list-hot">地区</a>
                  <a href="#">内地</a>
                  <a href="#">港台</a>
                  <a href="#">欧美</a>
                  <a href="#">日本</a>
                  <a href="#">韩国</a>
                  <a href="#">其他</a>
                </div>
                <div class="singer-tag-list">
                  <a href="#" class="singer-tag-list-hot">性别</a>
                  <a href="#">男</a>
                  <a href="#">女</a>
                  <a href="#">组合</a>
                  
                </div>
                <div class="singer-tag-list">
                  <a href="#" class="singer-tag-list-hot">风格</a>
                  <a href="#">流行</a>
                  <a href="#">嘻哈</a>
                  <a href="#">摇滚</a>
                  <a href="#">电子</a>
                  <a href="#">民谣</a>
                  <a href="#">民歌</a>
                  <a href="#">轻音乐</a>
                  <a href="#">爵士</a>
                  <a href="#">古典</a>
                  <a href="#">乡村</a>
                  <a href="#">蓝调</a>
                </div>
              </div>   
          </div>
          <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
                <img src="images/xusong.jpg" alt="">
                <p><a href="#">许嵩</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/renran.jpg" alt="">
              <p><a href="#">任然</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/xuezhiqian.jpg" alt="">
              <p><a href="#">薛之谦</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/dzq.jpg" alt="">
              <p><a href="#">邓紫棋</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
            <img src="images/lueluelue.jpg" alt="">
            <p><a href="#">略略略</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/linjunjie.jpg" alt="">
              <p><a href="#">林俊杰</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/huachenyu.jpg" alt="">
              <p><a href="#">华晨宇</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/dengshenmejun.jpg" alt="">
              <p><a href="#">等什么军</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/ayouyou.jpg" alt="">
              <p><a href="#">阿悠悠</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/fukesi.jpg" alt="">
              <p><a href="#">福克斯</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
            <img src="images/j.fla.jpg" alt="">
            <p><a href="#">J.Fla</a></p>
            </div>
            <div class="singer-picture-lg col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/liukeyi.jpg" alt="">
              <p><a href="#">刘珂矣</a></p>
            </div>
          </div>
          <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhoujielun.jpg" alt="">
              <a href="#">周杰伦</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/weixinyu.jpg" alt="">
              <a href="#">魏新雨</a>
            </div> 
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/lironghao.jpg" alt="">
              <a href="#">李荣浩</a>
            </div>
             <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/chnyixun.jpg" alt="">
              <a href="#">陈奕迅</a>
            </div> 
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/wangsulong.jpg" alt="">
              <a href="#">汪苏泷</a>
            </div> 
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/baixiaobai.jpg" alt="">
              <a href="#">白小白</a>
            </div> 
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhangshaohan.jpg" alt="">
              <a href="#">张韶涵</a>
            </div> 
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/maobuyi.jpg" alt="">
              <a href="#">毛不易</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/caixukun.jpg" alt="">
              <a href="#">蔡徐坤</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/chenxuning.jpg" alt="">
              <a href="#">陈雪凝</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/chenli.jpg" alt="">
              <a href="#">陈粒</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/xiaoqubing.jpg" alt="">
              <a href="#">肖曲冰</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/wuyutian.jpg" alt="">
              <a href="#">五月天</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/liuruiqi.jpg" alt="">
              <a href="#">刘瑞琦</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/liuruoying.jpg" alt="">
              <a href="#">刘若英</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/sunlu.jpg" alt="">
              <a href="#">孙露</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/liangjinru.jpg" alt="">
              <a href="#">梁静茹</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/daolang.jpg" alt="">
              <a href="#">刀郎</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/jiangjiang.jpg" alt="">
              <a href="#">蒋蒋</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhangyixing.jpg" alt="">
              <a href="#">张艺兴</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhuangxingyan.jpg" alt="">
              <a href="#">庄心妍</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhangjie.jpg" alt="">
              <a href="#">张杰</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/weixinyu.jpg" alt="">
              <a href="#">魏新雨</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/liyuchun.jpg" alt="">
              <a href="#">李宇春</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhoushen.jpg" alt="">
              <a href="#">周深</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/caixukun.jpg" alt="">
              <a href="#">蔡健雅</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/yangqianye.jpg" alt="">
              <a href="#">杨千嬅</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhangliangyin.jpg" alt="">
              <a href="#">张靓颖</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/sunyanzi.jpg" alt="">
              <a href="#">孙燕姿</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/liudehua.jpg">
              <a href="#">刘德华</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/xuwei.jpg" alt="">
              <a href="#">许巍</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/hita.jpg" alt="">
              <a href="#">HITA</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhangjinxuan.jpg" alt="">
              <a href="#">张敬轩</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/yinling.jpg" alt="">
              <a href="#">银临</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/chengxiang.jpg" alt="">
              <a href="#">程响</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/wanglihong.jpg" alt="">
              <a href="#">王力宏</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/taile.jpg" alt="">
              <a href="#">Taylor</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/luhan.jpg" alt="">
              <a href="#">鹿晗</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhaolei.jpg" alt="">
              <a href="#">赵雷</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/linyoujia.jpg" alt="">
              <a href="#">林宥嘉</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/zhouchuanxiong.jpg" alt="">
              <a href="#">周传雄</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/gege.jpg" alt="">
              <a href="#">张国荣</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/sia.jpg" alt="">
              <a href="#">Sia</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/jiangxueer.jpg" alt="">
              <a href="#">蒋雪儿</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/yangzongwei.jpg" alt="">
              <a href="#">杨宗纬</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/mowenwei.jpg" alt="">
              <a href="#">莫文蔚</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/majiantao.jpg" alt="">
              <a href="#">马健涛</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/maixiaodou.jpg" alt="">
              <a href="#">麦小兜</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/pushu.jpg" alt="">
              <a href="#">朴树</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/hu66.jpg" alt="">
              <a href="#">胡66</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/wangyuan.jpg" alt="">
              <a href="#">王源</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/yuji.jpg" alt="">
              <a href="#">虞姬</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/huxia.jpg" alt="">
              <a href="#">胡夏</a>
            </div>
            <div class="singer-picture-sm col-md-4 col-lg-2 col-sm-6 col-xs-6 text-center">
              <img src="images/gai.jpg" alt="">
              <a href="#">GAI</a>
            </div>
          </div>
          <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="page-wrap text-center">
              <strong>1</strong>
              <a href="#">2</a>
              <a href="#">3</a>
              <a href="#">4</a>
              <i>...</i>
              <a href="#">299</a>
              <span>></span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <footer>
      <div class="container m_content">
          <div class="row">
              <div class="row">
                  <div class="col-md-4 col-sm-12">
                           <span class="">下载我的音乐客户端</span>                           
                           
                                   
                              <div class="m_cont">
                                 <div><a href="#">&#xe8c4;</a><span>pc版</span></div>
                                 <div><a href="#">&#xe64d;</a><span>安卓版</span></div>
                                 <div><a href="#">&#xe63d;</a><span>苹果版</span></div>
                                 
                          </div>
                  </div>
                  <div class="col-md-4 col-sm-12">
                      <span>协议与声明</span>
                         <div class="m_agreement">
                              <span><a href="#">用户与服务协议</a></span>
                              <span><a href="#">免责声明</a></span>
                              <span><a href="#">隐私政策</a></span>
                              <span><a href="#">权利声明</a></span>  
                         </div>
                  </div>
                  <div class="col-md-4 col-sm-12">
                      <span>其他</span>
                      <div class="m_more">
                           <span><a href="#">联系我们</a></span>
                           <span><a href="#">腾讯音乐</a></span>
                           <span><a href="#">诚聘英才</a></span>
                           <span><a href="#">广告服务</a></span>
                           <span><a href="#">网上有害信息举报专所</a></span>
                      </div>
                  </div>
              </div>
              <div class="col-md-12 col-sm-12">
                    <div>
                        <span>
                          四川知了有限公司版权所有1网络文化经营许可证:京网文[2015]0525-205号1 信 息网络传播视听节目许可证0109362号1增值电信业务经营许可证B2 -20090418 I京ICP证
                          <br>060261号                            
                        </span>
                        <span>广播电视节目制作经营许可证京字第2037号|营 业性演出许可证京市演15741京公网安备 11010502030216号1京CP备09014827号
                      </span>
                        <span>举报电话: 010-879399491举报邮箱 : support@kuwo.cn
                      </span>
                        
                    </div>
              </div>

          </div>
      </div>
    </footer>
</body>
</html>